import React, { useState, useRef, useEffect } from 'react';
import './PasswordRecoveryForm.css';

const PasswordRecoveryForm = () => {
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    // Используем ref для прямого доступа к значению input
    const emailInputRef = useRef(null);

    // Добавляем состояние для управления отображением модального окна и кодом восстановления
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [recoveryCode, setRecoveryCode] = useState(Array(4).fill('')); // Массив из 4 элементов для хранения каждой цифры кода

// Создаем ссылки для каждого поля ввода кода
    const codeInputRefs = [];
    for (let i = 0; i < 4; i++) {
        codeInputRefs.push(useRef(null));
    }


    useEffect(() => {
        // Устанавливаем фокус на первое поле ввода кода, когда модальное окно открывается
        if (isModalOpen) {
            codeInputRefs[0].current.focus();
        }
    }, [isModalOpen]);

    const handleRecoveryCodeChange = (index, event) => {
        const newRecoveryCode = [...recoveryCode];
        newRecoveryCode[index] = event.target.value;

        setRecoveryCode(newRecoveryCode);

        // Если введена последняя цифра, отправляем запрос
        if (index === 3) {
            // Собираем код из массива в строку
            const enteredCode = newRecoveryCode.join('');
            // Отправляем запрос на сервер
            sendRecoveryCode(enteredCode);
        } else {
            // Переходим к следующему полю ввода
            codeInputRefs[index + 1].current.focus();
        }
    };

    const sendRecoveryCode = async (code) => {
        try {
            setLoading(true);
            setError('');

            console.log(code);

            // Заменяем URL и данные запроса на ваши
            const response = await fetch('http://localhost:3000/verify-code', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ code: code.toString() }),
            });

            if (response.ok) {
                // Обработка успешного ответа (например, переход к смене пароля)
                setMessage('Код подтвержден!');
                // Здесь вы можете добавить логику для перехода к форме смены пароля
            } else {
                const data = await response.json();
                setError(data.error || 'Неверный код восстановления.');
            }
        } catch (error) {
            console.error('Ошибка при проверке кода восстановления:', error);
            setError('Произошла ошибка. Пожалуйста, попробуйте позже.');
        } finally {
            setLoading(false);
        }
    };

    // Улучшенное регулярное выражение для валидации email (рассмотрите использование библиотеки 'validator' для более надежной проверки)
    const validateEmail = (email) => {
        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    };

    const handleCloseModal = () => {
        setIsModalOpen(false);
    };

    const handleSubmit = async (event) => {
        event.preventDefault();

        // Получаем значение input используя ref
        const enteredEmail = emailInputRef.current.value;

        if (!validateEmail(enteredEmail)) {
            setError('Пожалуйста, введите корректный адрес электронной почты.');
            return;
        }

        try {
            setLoading(true);
            setError('');
            setMessage('');

            // Замените это на ваш API-вызов для отправки email сброса пароля
            const response = await fetch('http://localhost:3000/forgot-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ login: enteredEmail }),
            });

            if (response.ok) {
                setMessage('Инструкции отправлены на ваш email!');
                setIsModalOpen(true);

            } else {
                const data = await response.json();
                setError(data.error || 'Произошла ошибка. Пожалуйста, попробуйте позже.');
            }
        } catch (error) {
            console.error('Ошибка при отправке email сброса пароля:', error);
            setError('Произошла ошибка. Пожалуйста, попробуйте позже.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="password-recovery-form">
            <h2>Восстановление пароля</h2>

            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <input type="email" ref={emailInputRef} placeholder="Введите свой адрес электронной почты" className="form-control" id="email" name="email" required></input>
                </div>

                <button type="submit" className="button">Отправить</button>
            </form>

            <div className="message-container">
                {message && <p className="success-message">{message}</p>}
                {error && <p className="error-message">{error}</p>}
            </div>
            {isModalOpen && (
                <div id="myModal" className="modal">
                    <div className="modal-content">
                        <span className="close" onClick={handleCloseModal}>&times;</span>
                        <h3>Введите код восстановления, который был отправлен на ваш email</h3>
                        <div className="recovery-code-container">

                            {recoveryCode.map((digit, index) => (
                                <input
                                    key={index}
                                    type="text"
                                    value={digit}
                                    onChange={(event) => handleRecoveryCodeChange(index, event)}
                                    ref={codeInputRefs[index]}
                                    className="recovery-code-input"
                                />
                            ))}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default PasswordRecoveryForm;
